<template>
  <div>
    <section id="cd-timeline" class="cd-container">
      <div v-for="(item,key) in items" :key="key" class="cd-timeline-block">
        <div class="cd-timeline-img cd-picture">
        </div>
        <div class="cd-timeline-content">
          <div>{{item.content}}</div>
          <span class="cd-date">{{item.time}}</span>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'timeLine',
    props: {
      items: {
        type: Array,
        default: () => []
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  #cd-timeline
    position: relative
    background-color: #fff

  #cd-timeline::before
    content: ''
    position: absolute
    top: 24px
    left: 18px
    height: calc(100% - 57px)
    width: 1px
    background: #dddddd

  *, *:after, *:before
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box

  .cd-timeline-block:first-child
    margin-top: 0

  .cd-timeline-block
    position: relative

  .cd-timeline-block:nth-child(1) .cd-picture
    width: 12px;
    height: 12px;
    left: 13px;

  .cd-picture:nth-last-child(1)
    position: absolute
    bottom: 40px
    left: 9px
    width: 20px
    height: 20px
    border-radius: 50%
    background-color: main-color

  .cd-picture:nth-child(1)
    position: absolute
    top: 23px
    left: 16px
    width: 6px
    height: 6px
    border-radius: 50%
    background-color: main-color

  .cd-timeline-content:nth-last-child(1) p:nth-child(1)
    color: #000

  .cd-timeline-img
    position: absolute
    top: 23px
    left: 16px
    width: 6px
    height: 6px
    border-radius: 50%
    background-color: main-color

  .cd-timeline-content
    position: relative
    margin-left: 40px
    padding: 1em
    border-bottom: 1px solid #e2e2e2
    font-size: 14px
    color: #999

  .cd-timeline-block:after
    content: ""
    display: table
    clear: both
</style>
